<template>
	<w-container id='cancallation' class='plr-24 page-bg'>
		<w-navbar navType="default" id="my-nav" title="注销账号申请"></w-navbar>
		<u-parse class='mt-32' :content='handleLang(cancellation)' style="color: #999;"></u-parse>
		<view class="action flex flex-dir-col flex-ai-center">
			<view class="flex font-size-12">
				<u-checkbox-group v-model="checked" placement="column">
					<u-checkbox :name='true' shape="circle" active-color="#EE4C35" :size="16"></u-checkbox>
				</u-checkbox-group>
				{{handleLang('我已阅读并知晓，愿意承担注销账户带来的后果。')}}
			</view>
			<w-button type="colorful" style='width: 100%;' class='mt-16' :disabled="disabled" @click='showTips=true'>{{handleLang('确认注销')}}
			</w-button>
		</view>

		<w-toast title="" btnType="primary" submitText="取消" cancelText="确认" contentAlign="center" v-model="showTips"
			:content="handleLang('账号注销后无法恢复,确定注销吗？')" @action='tipsRes'></w-toast>
			
		<u-popup :show='showAuth' round='12'  mode='center'>
			<view class="ptb-26 br-12 auth-popup" style="width: 654rpx;">
				<w-icon size='24' @click='showAuth=false' class='close' name="close3"></w-icon>
				<view class="pt-10 text-center font-color-black font-size-16 font-w-500">
					{{handleLang('请输入操作密码')}}
				</view>
				<view class="font-color-textPrimary font-size-12 text-center">
					{{handleLang('忘记密码？')}}
				</view>
				<view class="flex flex-center mt-30">
					<u-code-input :focus='true' v-model="pwd" dot :maxlength="6" borderColor='transparent' @finish='submit'>
					</u-code-input>
				</view>
			</view>
		</u-popup>	
		
	</w-container>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import {delAccount} from '@/api/user/index.js'
	export default {
		data() {
			return {
				showTips: false,
				checked: [],
				showAuth:false,
				pwd:'',
			};
		},
		computed: {
			...mapState('config', {
				cancellation(state) {
					return state.info.cancellation
				}
			}),
			disabled() {
				return !this.checked.length
			},
		},
		methods:{
			...mapActions('user',['logout']),
			tipsRes(res){
				//为false进行下一步动作
				this.showAuth=!res
			},
			submit(v){
				delAccount(v).then(this.logout)
			}
		}
	}
</script>

<style lang="scss">
	#cancallation {
		.action {
			position: fixed;
			left: 0;
			width: 100%;
			bottom: 0;
			@extend .plr-12;
			padding-bottom: calc(48rpx + var(--window-bottom));
		}
		.auth-popup{
			position: relative;
			.close{
				position: absolute;
				right: 0;
				top:-80rpx;
				z-index: 2;
			}
			/deep/ .u-code-input{
				gap: 20rpx;
			}
			/deep/ .u-code-input__item {
				background-color: #ECECEC;
				@extend .br-8;
				width: 84rpx !important;
				height: 84rpx !important;
				margin-right: 0 !important;
			}
		}
		
	}
</style>
